<template>
  <div class="moreDetail">
    <div class="titleBox">
      <h1 class="title">
        {{key}}
      </h1>
    </div>
    <div class="contentBox" v-if="moreData">
      <div class="itemBox" v-for="(item,index) in moreData" :key="index">
        <div class="opusBox">
          <div class="imgBox">
            <img :src="item.img" class="imgLabel girlImg" :class="'girlImg'+index" alt="">
          </div>
          <div class="itemTxtBox">
            <div class="userName">{{item.name}}</div>
            <div class="userAgreeBox">
              <div class="userInfoBox">
                <el-avatar size="small" :src="item.headpic"></el-avatar>
                <div class="userTxt">{{item.username}}</div>
              </div>
              <div class="commentBox">
                <div class="agreeBox" style="display: flex;" v-if="!item.support">
                  <!-- 点赞 -->
                  <div @click="agreeFun(item.id,item.agree)">
                    <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                      <path
                        d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                        fill="#707070" p-id="2640"></path>
                    </svg>
                  </div>
                  <div class="agreeNumber">{{item.agree}}</div>
                </div>
                <!-- 取消点赞 -->
                <div class="noAgreeBox" style="display: flex;" v-else>
                  <div @click="noAgreeFun(item.id,item.agree)">
                    <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                      <path
                        d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                        fill="#87b9fe" p-id="3208"></path>
                    </svg>
                  </div>
                  <div class="agreeNumber">{{item.agree}}</div>
                </div>
                <el-button icon="el-icon-download"
                  @click="$downloadImage(`girlImg${index}`,item.name)" type="text"
                  class="downloadImgBtn">
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      key: null,
      moreData: null,
      userInfo: null,
    }
  },
  watch: {
    '$route.query.key'(val) {
    },
  },
  mounted() {
    this.key = this.$route.query.key;
    this.getData(this.$route.query.key);
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      let is_login = localStorage.getItem("islogin");
      let params = {
        email: is_login,
      }
      this.$axios.post('/api/getUserInfo', params).then((res) => {
        let { data } = res
        this.userInfo = data[0];
      })
    },
    agreeFun(id, agree) {
      let params = {
        id,
        agree: Number(agree) + 1,
        user_id: this.userInfo.id,
        noAgree: false,
      };
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          this.changeFunAgreeFun(id)
        }
      });
    },
    changeFunAgreeFun(id) {
      this.moreData.forEach(el => {
        if (el.id == id) {
          el.agree = Number(el.agree) + 1;
          el.support = true;
        }
      });
    },
    noAgreeFun(id, agree) {
      let params = {
        id,
        agree: Number(agree) > 0 ? Number(agree) - 1 : Number(agree),
        user_id: this.userInfo.id,
        noAgree: true,
      };
      // console.log('取消点赞', params);
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          this.changeFunNoAgreeFun(id);
        }
      });
    },
    changeFunNoAgreeFun(id) {
      this.moreData.forEach(el => {
        if (el.id == id) {
          el.agree = Number(el.agree) - 1;
          el.support = false;
        }
      });
    },
    getData(key) {
      let params = {
        key,
        style: this.$route.query.style
      };
      this.$axios.post('/api/oreDetailData', params).then((res) => {
        let { data } = res;
        this.moreData = data;

      })
    },
  },
}
</script>
<style lang="scss" scoped>
.moreDetail {
  width: 1260px;
  margin: 0 auto;
  .titleBox {
    height: 40px;
    text-align: center;
  }
}
.contentBox {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .agreeBox,
  .noAgreeBox {
    width: 50px;
  }
  .agreeBox:hover,
  .noAgreeBox:hover {
    cursor: pointer;
  }
  .itemBox {
    width: 389px;
    margin-right: 30px;
    margin-bottom: 20px;
    .imgBox,
    .imgLabel {
      width: 390px;
      height: 220px;
    }
    .itemTxtBox {
      width: 389px;
      height: 100px;
      color: #fff;
      z-index: 20;
      padding: 0 20px;
    }
    .userAgreeBox {
      display: flex;
      justify-content: space-between;
      .userInfoBox {
        display: flex;
      }
      .userTxt {
        text-align: left;
        width: 150px;
        line-height: 30px;
        margin-left: 10px;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .commentBox {
      width: 100px;
      display: flex;
    }
    .imgBox:hover {
      cursor: pointer;
    }
    .userName {
      text-align: left;
      width: 330px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 20px;
      font-weight: bold;
    }
    .imgBox:hover .userName {
      display: none;
      cursor: pointer;
    }
  }
}
.opusBox {
  position: relative;
  .itemTxtBox {
    position: absolute;
    top: 150px;
    left: 0;
  }
}
.downloadImgBtn {
  margin-top: -10px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
.downloadImgBtn:hover {
  font-size: 20px;
}
</style>